<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>蓝源Eloan-P2P平台->用户注册</title>
  <link rel="stylesheet" href="/js/bootstrap-3.3.2-dist/css/bootstrap.css" type="text/css"/>
  <link rel="stylesheet" href="/css/core.css" type="text/css"/>
  <script type="text/javascript" src="/js/jquery/jquery-2.1.3.js"></script>
  <script type="text/javascript" src="/js/bootstrap-3.3.2-dist/js/bootstrap.js"></script>
  <script type="text/javascript" src="/js/plugins/jquery-validation/jquery.validate.js"></script>
  <script type="text/javascript" src="/js/plugins/jquery.form.js"></script>
  <script type="text/javascript" src="/js/jquery.bootstrap.min.js"></script>

  <style type="text/css">
    .el-register-form {
      width: 600px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
    }

    .el-register-form .form-control {
      width: 220px;
      display: inline;
    }

    input[name='verifycode'] + label {
      position: absolute;
      top: 7px;
      left: 220px;
    }
  </style>
</head>
<body>
<!-- 网页头信息 -->
<div class="el-header">
  <div class="container" style="position: relative;">
    <ul class="nav navbar-nav navbar-right">
      <li><a href="/">首页</a></li>
      <li><a href="/login.html">登录</a></li>
      <li><a href="#">帮助</a></li>
    </ul>
  </div>
</div>

<!-- 网页导航 -->
<div class="navbar navbar-default el-navbar">
  <div class="container">
    <div class="navbar-header">
      <a href=""><img alt="Brand" src="/images/logo.png"></a>
      <span class="el-page-title">用户注册</span>
    </div>
  </div>
</div>

<!-- 网页内容 -->
<div class="container">
  <form id="registerForm" class="form-horizontal el-register-form" action="/userRegister" method="post">
    <p class="h4" style="margin: 10px 10px 20px;color:#999;">请填写注册信息，点击“提交注册”即可完成注册！</p>
    <div class="form-group">
      <label class="control-label col-sm-2">手机号码</label>
      <div class="col-sm-10">
        <input type="text" placeholder="手机号码" autocomplete="off" name="username" class="form-control" id="phoneNumber"/>
        <p class="help-block">请使用输入正确的手机号码</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">手机验证码</label>
      <div class="col-sm-10">
        <input type="text" placeholder="手机验证码" style="width: 100px" autocomplete="off" name="verifycode"
               class="form-control" id="verifycode"/>
        <button type="button" class="btn btn-success" id="sendVerifyCode">
          发送验证码
        </button>
        <p class="help-block">用户名为4~16位字母，数字，符号或中文</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">密&emsp;码</label>
      <div class="col-sm-10">
        <input type="password" placeholder="密码" autocomplete="off" name="password" id="password" class="form-control"/>
        <p class="help-block">密码为4~16位字符组成,采用数字、字母、符号安全性更高</p>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2">确认密码</label>
      <div class="col-sm-10">
        <input type="password" placeholder="确认密码" autocomplete="off" name="confirmPwd" class="form-control"/>
        <p class="help-block">请再次填写密码</p>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2">
        <button type="submit" class="btn btn-success">
          同意协议并注册
        </button>
        &emsp;&emsp;
        <a href="/login.html" class="text-primary">已有账号，马上登录</a>

        <p style="padding-left: 50px;margin-top: 15px;">
          <a href="#">《使用协议说明书》</a>
        </p>
      </div>
    </div>
  </form>
</div>
<!-- 网页版权 -->
<div class="container-foot-2">
  <div class="context">
    <div class="left">
      <p>专注于高级Java开发工程师的培养</p>
      <p>版权所有：&emsp;2017广州狼码教育科技有限公司</p>
      <p>地&emsp;&emsp;址：&emsp;广州市天河区棠下涌东路大地商务港D座603室</p>
      <p>电&emsp;&emsp;话： 020-2900xxxx&emsp;&emsp;
        邮箱：&emsp;service@wolfcode.cn</p>
      <p>
        <a href="http://www.miitbeian.gov.cn" style="color: #ffffff">ICP备案
          ：粤ICP备字17147191号-1</a>
      </p>
      <p>
        <a href="http://www.gzjd.gov.cn/wlaqjc/open/validateSite.do" style="color: #ffffff">穗公网安备：44010650010086</a>
      </p>
    </div>
    <div class="right">
      <a target="_blank" href="http://weibo.com/wolfcode"><img
        src="/images/sina.png"></a>
    </div>
    <div class="clearfix"></div>
  </div>
</div>


<script>
  // 添加 发送验证码 按钮
  let $sendVerifyCode = $('#sendVerifyCode');
  $sendVerifyCode.click(function () {
    // 获取 手机号
    let phoneNumber = $("#phoneNumber").val();
    if (!checkPhone(phoneNumber)){
      // 不符合规则
      $.messager.popup("请填写正确的 手机号码");
      return;
    }
    // 符合规则
    $sendVerifyCode.prop('disabled', true);
    $.ajax({
      url: '/sendVerifyCode',
      dataType: 'json',
      data: {
        phoneNumber: phoneNumber
      },
      success: (data) => {
        $.messager.popup(data.msg);
        // 设置定时器
        if (data.success) {
          var num = 3;
          var timer = window.setInterval(function () {
            if (num > 0) {
              $sendVerifyCode.text(`${num}秒后重新发送`);
            } else {
              window.clearInterval(timer);
              $sendVerifyCode.text('发送验证码').prop('disabled', false)
          }
            num --;
          }, 1000);
          $sendVerifyCode.text(`${num--}秒后重新发送`);
        } else {
          $sendVerifyCode.text('发送验证码').prop('disabled', false)
        }
      }

    });

  })

  function checkPhone(value) {
    var flag = /^((13[0-9])|(15[^4])|(18[0,2,3,5-9])|(17[0-8])|(147))\d{8}$/.test(value);
    return flag;
  }
  // 添加 验证 手机号码
  $.validator.addMethod("checkPhone", checkPhone, function (param, ele) {
    var str = ele.value + "";
    var val = str.slice(0, 3);
    if (!/^\d{11}$/.test(str)) {
      return "手机号码必须 全为数字";
    }
    return `手机号码不能以 ${val} 开头`
  });



  let registerForm = $("#registerForm");


  registerForm.validate({
    submitHandler: function (form) {
      registerForm.ajaxSubmit(function (data) { // ajax 请求
        if (data.success) {
          $.messager.confirm("温馨提示", "注册成功，点击确定跳转 登录页面", function () {
            location.href = "/login.html";
          })
        } else {
          // 提示 比较 友好
          $.messager.popup(data.msg);
        }
      })
    },
    errorClass: 'text-danger', // 出错class
    highlight: function (ele, errClz) { // input 样式
      $(ele).closest('.form-group').addClass("has-error").removeClass("has-success");
    },
    unhighlight: function (ele, errClz) {
      $(ele).closest('.form-group').removeClass("has-error").addClass("has-success");
    },
    rules: {
      username: {
        required: true,
        rangelength: [11, 11],
        checkPhone: true,
        remote: {
          url: "/checkPhone",     //后台处理程序
          type: "post",               //数据发送方式
          dataType: "json",           //接受数据格式
          data: {                     //要传递的数据
            username: function () {
              return $("#phoneNumber").val();
            }
          }
        }
      },
      verifycode: {
        required: true,
      },
      password: {
        required: true,
        rangelength: [4, 16]
      },
      confirmPwd: {
        equalTo: '#password'
      }
    },
    messages: {
      username: {
        required: "请输入手机号码",
        rangelength: "用户名必需是11位",
        remote: "该用户已注册"
      },
      verifycode: {
        required: "请输入手机验证码",
      },
      password: {
        required: "请输入密码",
        rangelength: "密码必需在 4 ~ 16 个字符 之间"
      },
      confirmPwd: {
        equalTo: '两次密码必须输入一致'
      },
    }
  });
</script>
</body>
</html>